<template>
  <page-wrap stay-still back hide-tab title="企业详情">
    <view class="comapny-detail">
      <view class="cd-info cd-sect">
        <view class="info-main">
          <view class="info-avatar">
            <image mode="aspectFill" :src="comapnyDetail.logopath"></image>
          </view>
          <view class="info-desc">
            <view class="id-name">{{ comapnyDetail.cname }}</view>
            <view class="id-other">
              <text class="type">{{
                comapnyDetail.cxz || "其他企业性质"
              }}</text>
              <text>|</text>
              <text class="scale">{{
                comapnyDetail.yuangong || "其他企业规模"
              }}</text>
            </view>
          </view>
        </view>
        <view class="info-opt" v-if="notCompany">
          <button
            class="option-btn share"
            open-type="share"
            @click="handleWeChat"
            v-if="shareList.length"
          >
            分享
          </button>
          <!-- <text class="option-btn share" @click="showShare = true" v-if="shareList.length">分享</text> -->
          <text
            :class="['option-btn collect', { active: isCollected }]"
            @click="handleCollect"
            >{{ isCollected ? "已关注" : "关注" }}</text
          >
        </view>
      </view>
      <u-tabs-swiper
        ref="tabs"
        :is-scroll="false"
        :list="tabList"
        :current="current"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        bar-width="56"
        bar-height="14"
        :bar-style="barStyleObj"
        gutter="64"
        :duration="0.2"
        :active-item-style="activeStyle"
        @change="handleTab"
        class="u-border-bottom"
      ></u-tabs-swiper>
      <swiper
        class="swiper-box"
        :duration="200"
        :current="swiperCurrent"
        @transition="handleTransition"
        @animationfinish="handleAnimation"
      >
        <swiper-item class="swiper-item">
          <scroll-view scroll-y class="scroll-views">
            <view
              :class="[
                'cd-intro cd-sect',
                { cut: !showMore },
                { nomore: !needShowMore },
              ]"
            >
              <view class="ci-title sect-title">
                <text class="icon icon-title"></text> 公司简介</view
              >
              <view class="ci-cont">
                <view
                  id="intro"
                  ref="intro"
                  v-html="formatHtml(comapnyDetail.jianj) || '暂无'"
                ></view>
              </view>
              <view
                class="ci-more"
                v-if="needShowMore"
                @click="showMore = !showMore"
              >
                <text></text>
              </view>
            </view>
            <view class="cd-region cd-sect">
              <view class="cr-title sect-title">
                <text class="icon icon-title"></text>公司地址</view
              >
              <view class="cr-cont">{{ comapnyDetail.address }}</view>
            </view>
            <view
              class="cd-benefit cd-sect"
              v-if="comapnyTags && comapnyTags.length"
            >
              <view class="cb-title sect-title">
                <text class="icon icon-title"></text>公司福利</view
              >
              <view class="cb-list">
                <text
                  class="cb-item"
                  v-for="(item, index) in comapnyTags"
                  :key="index"
                  >{{ item.ylt_name }}</text
                >
              </view>
            </view>
            <view class="cd-other cd-sect">
              <view class="co-title sect-title">
                <text class="icon icon-title"></text>公司名片</view
              >
              <view class="cb-cont">
                <view class="cont-item cont-scale">
                  <text>规模</text
                  >{{ comapnyDetail.yuangong || "其他企业规模" }}
                </view>
                <view class="cont-item cont-trade">
                  <text>行业</text>{{ comapnyDetail.trade || "其他行业" }}
                </view>
                <view class="cont-item cont-website">
                  <text>网址</text
                  ><text class="link">{{
                    comapnyDetail.redirect_url || "未知"
                  }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item post">
          <scroll-view
            scroll-y
            @scrolltolower="handleMore"
            class="scroll-views"
          >
            <template v-if="postList.length">
              <view
                class="cd-post"
                v-for="(item, index) in postList"
                :key="index"
              >
                <JobItem :item="item" :props="postProps" :zpid="item.zp_id" :activityId="activityId" />
                <!-- <view class="post-top">
                  <text class="post-name">{{ item.jtzw }}</text>
                  <text class="post-salary">{{ item.salary }}</text>
                </view>
                <view class="post-middle">
                  <text class="post-region">{{
                    item.workplace || "地区不限"
                  }}</text>
                  <text class="post-exp">{{ item.gznum || "经验不限" }}</text>
                  <text class="post-edu">{{ item.edus || "学历不限" }}</text>
                </view>
                <view class="post-bottom">
                  <text class="post-time">{{ item.idate }}</text>
                </view> -->
              </view>
              <u-loadmore
                class="job-more"
                :status="moreLoading"
                :load-text="loadText"
            /></template>
            <u-empty text="暂无数据" v-else></u-empty>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-popup v-model="showShare" mode="bottom" safe-area-inset-bottom>
      <button
        class="share-item u-border-bottom"
        v-for="(item, index) in shareList"
        :key="index"
        :open-type="item.type"
        @click="handleShare(item)"
      >
        {{ item.text }}
      </button>
      <button class="share-item close" @click="showShare = false">取消</button>
    </u-popup>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack" ></LoginDialog>
  </page-wrap>
</template>

<script>
import { formatHtml, httpToHttps } from "@/utils/handle";
import JobItem from "@/components/JobItem.vue";
import {
  getComapnyTags,
  getCompanyDetail,
  getCompanyZpList,
  addCompanyFollow,
  cancelCompanyFollow,
  isCompanyFollow,
} from "@/api/index";
import ShareMixin from '@/mixins/share';
import LoginMixin from '@/mixins/login.js';
import LoginDialog from '@/components/LoginDialog';

export default {
  mixins: [ShareMixin, LoginMixin],
  components: {
    JobItem,
    LoginDialog
  },
  data() {
    return {
      formatHtml,
      notCompany: uni.getStorageSync("login-status") !== "company",
      activeColor: this.$primaryColor,
      inactiveColor: "#555555",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      comapnyDetail: {},
      comapnyTags: [],
      tabList: [
        {
          name: "简介",
        },
        {
          name: "职位",
        },
      ],
      jobpage: 0,
      showMore: false,
      needShowMore: false,
      // 默认切换到职位
      current: 1,
      swiperCurrent: 1,
      activeStyle: {
        color: "#222222",
        fontSize: "36rpx",
      },
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      postList: [],
      isCollected: false,
      showShare: false,
      shareList: [
        // #ifdef MP-WEIXIN
        {
          text: "转发至微信好友或群聊",
          fcn: this.handleWeChat,
          type: "share",
        },
        // #endif
        // {
        //   text: "生成职位详情长图",
        //   fcn: this.handleLongImg,
        //   type: "",
        // },
        // {
        //   text: "生成职位名片",
        //   fcn: this.handleCard,
        //   type: "",
        // },
        // #ifdef MP-WEIXIN
        {
          text: "生成职位详情小程序码",
          fcn: this.handleCode,
          type: "",
        },
        // #endif
      ],
      barStyleObj: {
        backgroundColor: "transparent",
        backgroundImage: `url(${this.$imgBaseSelf}/select.png)`,
        backgroundSize: "100% 100%",
        borderRadius: '0',
      },
      postProps: {
        title: "jtzw",
        salary: "salary",
        cname: "cname",
        time: "time",
        region: "workplace",
        fldy: "fldy",
        gznum: "gznum",
        edus: "edus",
        jobtypes: 'jobtypes',
        yuangong: 'yuangong',
      },
      activityId: '',
    };
  },
  onLoad(opt) {
    this.companyId = opt.companyId;
    if(opt.scene) {
      const scene = decodeURIComponent(opt.scene);
      this.companyId = scene.split('=')[1];
    }
    this.opt = opt;
    this.getCompanyDetail();
    this.getComapnyTags();
    this.getCompanyZpList();
    this.getFollowStatus();

    this.sharePath = `/pagesSub/public/companyDetail/index?companyId=${this.companyId}`;
    this.shareQuery = `companyId=${this.companyId}`;

    this.activityId = opt.activityId;
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName + " - " + this.comapnyDetail.cname,
  //     path: `/pagesSub/public/companyDetail/index?companyId=${this.companyId}`,
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName + " - " + this.comapnyDetail.cname,
  //     path: `/pagesSub/public/companyDetail/index?companyId=${this.companyId}`,
  //   };
  // },
  mounted() {
    if(this.opt.tab) {
      this.current = this.opt.tab;
      this.swiperCurrent = this.opt.tab;
    }
  },
  methods: {
    // 公司详情
    getCompanyDetail() {
      let data = {
        company_id: this.companyId,
      };
      getCompanyDetail(data).then((res) => {
        this.comapnyDetail = res.data || res;
        this.comapnyDetail.logopath = httpToHttps(this.comapnyDetail.logopath);
        this.shareTitle = this.$selfName + " - " + this.comapnyDetail.cname;
        this.$nextTick(() => {
          let theNode = uni.createSelectorQuery().select("#intro");
          theNode
            .boundingClientRect((rectData) => {
              this.needShowMore = rectData.height > 110;
            })
            .exec();
          // this.needShowMore = this.$refs.intro.$el.offsetHeight > 220;
        });
      });
    },
    // 公司福利
    getComapnyTags() {
      let params = {
        company_id: this.companyId,
      };
      getComapnyTags(params).then((res) => {
        let data = res.data || res;
        if (data && data.length && data !== "null") {
          this.comapnyTags = res.data || res;
        }
      });
    },

    getCompanyZpList() {
      let params = {
        company_id: this.companyId,
        conditionArr: {
          listtype: "pageList",
          page_size: "20",
          page: this.jobpage,
          is_mp: 1,
        },
      };
      params.conditionArr = JSON.stringify(params.conditionArr);
      this.moreLoading = "loading";
      getCompanyZpList(params).then((res) => {
        let data = res.data.data || res.data;
        if (data && data.length) {
          this.postList.push(...data);
          if (+res.data.page < +res.data.pages) {
            this.moreLoading = "loadmore";
            this.jobpage++;
          } else {
            this.moreLoading = "nomore";
          }
        } else {
          this.moreLoading = "nomore";
        }
      });
    },

    getFollowStatus() {
      var data = {
        personid: this.personId,
        company_id: this.companyId,
        array: [],
      };
      isCompanyFollow(data).then((res) => {
        this.isCollected = +res.code === 200;
      });
    },

    handleCollect() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      if (this.isCollected) {
        this.unFollow();
      } else {
        this.follow();
      }
    },
    follow() {
      let data = {
        personid: this.personId,
        company_id: this.companyId,
      };
      addCompanyFollow(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "关注成功",
            icon: "none",
          });
          this.isCollected = true;
        }
      });
    },

    unFollow() {
      let data = {
        personid: this.personId,
        company_id: this.companyId,
      };
      cancelCompanyFollow(data).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "取消成功",
            icon: "none",
          });
          this.isCollected = false;
        }
      });
    },

    handleMore() {
      if (this.moreLoading != "nomore") this.getCompanyZpList();
    },
    handleJobItem(item) {
      uni.navigateTo({
        url: "/pagesSub/public/jobDetail/index?jobId=" + item.zp_id,
      });
    },
    handleTab(index) {
      this.swiperCurrent = index;
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },

    handleShare(item) {
      this.showShare = false;
      this.$nextTick(item.fcn);
    },
    handleWeChat() {},
    handleLongImg() {},
    handleCard() {},
    handleCode() {},
    loginSuccessBack(){
      console.log("loginSuccessBack");
    }
  },
};
</script>

<style lang="scss">
$img-base-cdetail: $img-base + "cdetail/";
.comapny-detail {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 1rpx;

  .cd-sect {
    margin-bottom: 24rpx;
    padding: 32rpx;
    color: $uni-text-color-666;
    background: $uni-bg-color;
  }
  .cd-info {
    flex-shrink: 0;
    margin: 32rpx;
    box-shadow: 0 18rpx 25rpx 0rpx #EEEEEE;
    &.cd-sect {
      border-radius: 20rpx;
    }
    .info-main {
      display: flex;
      .info-avatar {
        margin-right: 24rpx;
        image {
          width: 140rpx;
          height: 85rpx;
          border-radius: 16rpx;
          border: 1rpx solid $uni-bg-color-border-d9;
        }
      }
      .info-desc {
        font-size: $uni-font-size-base;
        line-height: $uni-font-size-base;
        .id-name {
          font-size: $uni-font-size-lg;
          line-height: $uni-font-size-max;
          font-weight: bold;
        }
        .id-other {
          display: flex;
          align-items: center;
          margin-top: 16rpx;
          color: $uni-text-color-999;
          text {
            margin-right: 16rpx;
          }
        }
      }
    }
    .info-opt {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 24rpx;
      .option-btn {
        display: flex;
        align-items: center;
        margin: 0 0 0 32rpx;
        padding: 0;
        font-size: $uni-font-size-base;
        &::before {
          content: "";
          display: inline-block;
          margin-right: 8rpx;
          width: 54rpx;
          height: 54rpx;
          background-size: 100% 100%;
        }
        &.share {
          background: transparent;
          border: none;
          &::before {
            background-image: url($img-base-cdetail + "share.png?v=2");
          }
          &::after {
            display: none;
          }
          &.button-hover {
            background: transparent;
            color: $uni-text-color-222;
          }
        }
        &.collect {
          &::before {
            background-image: url($img-base-cdetail + "collect.png");
          }
          &.active {
            &::before {
              background-image: url($img-base-cdetail + "collected.png");
            }
          }
        }
      }
    }
  }
  .u-tabs {
    flex-shrink: 0;
    padding-bottom: 20rpx;
    ::v-deep .u-tabs-item {
      font-size: 28rpx;
    }
  }
  .swiper-box {
    flex-grow: 1;
    height: 1rpx;
    display: flex;
    flex-direction: column;
    // margin-top: 24rpx;
    /* #ifdef H5 */
    ::v-deep .uni-swiper-wrapper {
      flex-grow: 1;
      height: 1rpx;
      uni-scroll-view {
        height: 100%;
      }
    }
    /* #endif */
  }
  .sect-title {
    color: #000;
    font-size: $uni-font-size-lg;
    line-height: $uni-font-size-big;
    font-weight: bold;
  }
  .cd-intro {
    padding: 32rpx 32rpx 0;
    .ci-cont {
      margin-top: 24rpx;
      font-size: $uni-font-size-nor;
      line-height: $uni-font-size-max;
    }
    .ci-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32rpx 0;
      text {
        width: 32rpx;
        height: 32rpx;
        background-image: url($img-base-cdetail + "more.png");
        background-size: 100% 100%;
        transition: transform 0.4s;
        transform: rotate(-180deg);
      }
    }
    &.cut {
      .ci-cont {
        max-height: 220rpx;
        overflow: hidden;
      }
      .ci-more {
        text {
          transform: rotate(0deg);
        }
      }
    }
    &.nomore {
      padding: 32rpx;
    }
  }
  .cd-region {
    .cr-cont {
      display: flex;
      margin-top: 32rpx;
      font-size: $uni-font-size-base;
      line-height: $uni-font-size-lg;
      &::before {
        content: "";
        flex-shrink: 0;
        display: block;
        margin-right: 8rpx;
        width: 32rpx;
        height: 32rpx;
        background-image: url($img-base-cdetail + "address.png?v=1");
        background-size: 100% 100%;
      }
    }
  }
  .cd-benefit {
    padding: 32rpx 16rpx 16rpx 32rpx;
    .cb-list {
      margin-top: 32rpx;
      display: flex;
      flex-wrap: wrap;
      .cb-item {
        margin-right: 16rpx;
        margin-bottom: 16rpx;
        padding: 12rpx;
        background: $uni-bg-color-tag;
        border-radius: 8rpx;
        font-size: $uni-font-size-sm;
        line-height: $uni-font-size-sm;
        color: $uni-text-color-tag;
      }
    }
  }
  .cd-other {
    margin-bottom: 32rpx;
    font-size: $uni-font-size-base;
    line-height: $uni-font-size-base;
    .cb-cont {
      .cont-item {
        display: flex;
        align-items: flex-start;
        margin-top: 24rpx;
        word-break: break-word;
        text {
          margin-right: 40rpx;
          color: $uni-text-color-888;
          width: 60rpx;
          flex-shrink: 0;
        }
        &.cont-trade {
          line-height: 36rpx;
        }
        .link {
          width: 80%;
          color: #0089ff;
          word-break: break-word;
        }
      }
    }
  }
  .post {
    padding-top: 20rpx;
  }
  .cd-post {
    margin: 16rpx 32rpx;
    // padding: 32rpx;
    background: $uni-bg-color;
    border-radius: 24rpx;
    font-size: $uni-font-size-nor;
    // box-shadow: 0px 8rpx 20rpx 2rpx #eee;
    .post-top {
      display: flex;
      justify-content: space-between;
      font-size: $uni-font-size-lg;
      line-height: $uni-font-size-lg;
      font-weight: bold;
      .post-name {
        color: #000;
        line-height: 1.5;
      }
      .post-salary {
        color: $u-type-primary;
      }
    }
    .post-middle {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      color: $uni-text-color-555;
      text {
        display: flex;
        align-items: center;
        margin-right: 24rpx;
        &::before {
          content: "";
          display: inline-block;
          margin-right: 4rpx;
          width: 28rpx;
          height: 28rpx;
          background-size: 100% 100%;
        }
        &.post-region {
          padding: 4rpx 8rpx;
          color: $uni-text-color-tag;
          border-radius: $uni-border-radius-sm;
          background-color: $uni-bg-color-tag;
          &::before {
            background-image: url($img-base-cdetail + "region.png");
          }
        }
        &.post-exp {
          &::before {
            background-image: url($img-base-cdetail + "exp.png");
          }
        }
        &.post-edu {
          &::before {
            background-image: url($img-base-cdetail + "edu.png");
          }
        }
      }
    }
    .post-bottom {
      margin-top: 24rpx;
      color: $uni-text-color-555;
    }
  }
  ::v-deep .u-load-more-wrap {
    padding: 16rpx 0 40rpx;
  }

  .icon-title {
    width: 30rpx;
    height: 30rpx;
    margin-right: 16rpx;
    background-image: url($img-base-cdetail + "title.png");
    background-size: 100% 100%;
    vertical-align: baseline;
  }

  .swiper-item,
  .scroll-views {
    height: 100%;
    background-color: $uni-bg-color;
  }
}
</style>
